﻿<script setup lang="ts" name="AndroidShell">
import PhoneHeader from '../phoneHeader/index.vue'
const props = defineProps({
  height: { type: Number }
})
const mainHeight = ref((props.height - 40) || 0)
watch(
  () => props.height,
  (v) => {
    mainHeight.value = v - 40
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<template>
  <div class="phone" :style="{height: mainHeight +'px'}">
    <div class="border-panel"></div>
    <div class="box">
      <PhoneHeader></PhoneHeader>
      <div class="app-button">
        <div class="left-button"></div>
        <div class="right-button">
          <div class="capsule">
            <span class="share"><i></i></span>
            <span class="close"><i></i></span>
          </div>
        </div>
      </div>
      <div class="android-box">
        <slot />
      </div>
    </div>
    <!--other begin-->
    <div class="volume1"></div>
    <div class="volume2"></div>
    <div class="power"></div>
    <div class="receiver">
      <div></div>
    </div>
    <!--other end-->
  </div>
</template>

<style scoped lang="scss">
.phone {
  width: 369px;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  .border-panel{
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
    border: 20px solid #000;
    border-radius: 40px;
    z-index: 2;
    &::before {
      content: "";
      position: absolute;
      box-shadow: 0px 0px 24px #fff;
      border-radius: 30px;
      left: -10px;
      right: -10px;
      bottom: -8px;
      top: -8px;
      display: block;
    }
    &::after {
      content: "";
      position: absolute;
      border: 16px solid #19191d;
      background: #19191d;
      border-top: 30px solid #19191d;
      border-bottom: 30px solid #19191d;
      border-radius: 30px;
      left: -6px;
      top: -6px;
      bottom: -6px;
      right: -6px;
      display: block;
    }
  }
  .box {
    --el-phone-header-color: #666;

    position: absolute;
    left: -3px;
    right: -3px;
    top: 0;
    bottom: 0;
    z-index: 9;
    border-radius: 20px;
    box-shadow: #2e2c2c 0 0 14px;
    background-color: #ffffff;
    overflow: hidden;
    .android-box{
      position: absolute;
      left: 0;
      top: 74px;
      bottom: 0;
      width: 100%;
      overflow: hidden;
    }
  }
  .volume1, .volume2 {
    width: 9px;
    height: 46px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    right: -25px;
    z-index: -1;
    border-radius: 20px;
  }
  .volume1{
    top: 100px;
  }
  .volume2{
    top: 156px;
  }
  .power {
    width: 9px;
    height: 46px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    right: -25px;
    top: 235px;
    z-index: -1;
    border-radius: 20px;
  }
  .receiver {
    position: absolute;
    top: -13px;
    left: 50%;
    margin-left: -50px;
    background: #000000;
    border: #484848 1px solid;
    width: 100px;
    height: 8px;
    z-index: 9;
    border-radius: 20px;
    div {
      width: 100px;
      height: 8px;
      &::after {
        content: "";
        display: block;
        width: 95%;
        height: 83%;
        top: 1px;
        left: 3px;
        position: absolute;
        background-repeat: no-repeat;
        background-image: repeating-linear-gradient(to right, #434242, #000000 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px), repeating-linear-gradient(to right, #434242, #19191d 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px);
        background-size: 100% 50%;
        background-position: 0 0, 2px 4px;
        transform: skew(-25deg);
      }
    }
  }
  .app-button{
    height: 48px;
    width: 100%;
    padding: 8px;
    display: flex;
    position: absolute;
    top: 26px;
    left: 0;
    .left-button,.right-button{
      display: flex;
      flex: 1;
    }
    .right-button{
      justify-content: flex-end;
      .capsule{
        width: 92px;
        height: 32px;
        position: relative;
        display: flex;
        &:before{
          display: block;
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          border-radius: 32px;
          border: thin solid #eaeaea;
          background-color: rgba(255,255,255,.5);
        }
        span{
          height: 100%;
          flex: 1;
          position: relative;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: center;
          &.share{
            i{
              display: block;
              width: 6px;
              height: 6px;
              position: relative;
              border-radius: 100%;
              background-color: #000;
              &:before,&:after{
                content: '';
                display: block;
                width: 4px;
                height: 4px;
                border-radius: 100%;
                position: absolute;
                background-color: #000;
                top: 1px;
              }
              &:before{
                left: -8px;
              }
              &:after{
                right: -8px;
              }
            }
          }
          &.close{
            i{
              display: block;
              width: 18px;
              height: 18px;
              position: relative;
              border-radius: 100%;
              border: 2px solid #000;
              &:before{
                content: '';
                display: block;
                position: absolute;
                width: 6px;
                height: 6px;
                background-color: #000;
                left: 50%;
                top: 50%;
                margin: -3px 0 0 -3px;
                border-radius: 100%;
              }
            }
          }
        }
        span+span{
          &:before{
            content: '';
            display: block;
            width: 1px;
            background-color: #eaeaea;
            height: 18px;
            top: 6px;
            left: 0;
            position: absolute;
          }
        }
      }
    }
  }
}
</style>
